<template>
  <div ref="chartRef" style="width:100%;height:100%"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref(null);
const ageGroups = ['18-29', '30-39', '40-49', '50-59', '60-69', '70+'];
const avgStride = [0.75, 0.74, 0.73, 0.71, 0.68, 0.65]; // 示例数据，单位米
const colors = ['#5470C6','#91CC75','#FAC858','#EE6666','#73C0DE','#3BA272'];
onMounted(() => {
  const chart = echarts.init(chartRef.value);
  chart.setOption({
    title: { text: '不同年龄段平均步幅', left: 'center' },
    tooltip: {},
    xAxis: { type: 'category', data: ageGroups },
    yAxis: { type: 'value', name: '步幅（米）' },
    series: [{
      type: 'bar',
      data: avgStride,
      itemStyle: {
        color: function(params) { return colors[params.dataIndex]; }
      }
    }]
  });
});
</script>